Fondamentaux du Web

Introduction au HTML/CSS

DSP - USAL33

Qu'est-ce qu'une page web ?

« Une page web est une unité de consultation du World Wide Web. Conçue pour être consultée avec un navigateur web et identifiée par une adresse web, elle peut être statique ou dynamique. » (Wikipedia)

En pratique : un fichier (ou un ensemble de fichiers) que le navigateur récupère via Internet et rend sous forme de texte, d'images, de vidéos ou d'interactions.

Architecture simplifiée du Web

Élément Rôle Exemple
Client Demande et affiche le contenu Firefox, Chrome, Safari, Edge
Serveur Héberge les fichiers et les renvoie Apache, Nginx
URL Adresse unique de la ressource https://exemple.com/index.html

Statique ⟷ Dynamique

Type Description Fichiers
Statique Contenu fixe sans intervention index.html + style.css livrés tels quels
Dynamique Contenu généré à la volée Scripts serveur (PHP, Node.js, Python)

Pour ce cours : uniquement le statique (HTML + CSS).

HTML / CSS = description de la page

Rôles complémentaires

  • HTML décrit la structure (titres, paragraphes, images...)
  • CSS décrit la présentation (couleurs, marges, polices...)

Le navigateur interprète ces fichiers

  1. Parse le HTML → DOM
  2. Parse le CSS → CSSOM
  3. Combine → Render Tree
  4. Layout → Paint → affichage

Le navigateur : un exécutant

Le navigateur agit comme un exécutant d'une description.

⚠️ Pas de contrôle de flux (boucles, conditions) comme dans un programme classique.

HTML et CSS sont des langages déclaratifs, pas impératifs.

Cycle de vie d'une page web

1. Utilisateur demande une page (URL)
2. Navigateur contacte le serveur (DNS → IP)
3. Requête HTTP envoyée
4. Serveur renvoie la réponse (HTML)
5. Téléchargement des ressources (CSS, images, JS)
6. Construction du DOM et du CSSOM
7. Création du Render Tree
8. Calcul du layout
9. Peinture → Affichage final

Langages du Web

Catégorie Langage(s) Rôle
Balisage HTML Structure du document
Feuille de style CSS Présentation
Script côté client JavaScript Logique interactive
Description de données JSON, XML Transport de données

Les standards du W3C

Qu'est-ce que le W3C ?

  • World Wide Web Consortium, fondé en 1994 par Tim Berners-Lee
  • Mission : développer des standards ouverts pour le Web

Pourquoi les respecter ?

  • Compatibilité entre navigateurs · Pérennité du code
  • Accessibilité · SEO · Maintenance facilitée

Validation : https://validator.w3.org/

Historique rapide

HTML

  • 1991 : HTML 1.0 (18 balises) · 1999 : HTML 4.01 (structure/présentation)
  • 2014 : HTML5 (sémantique, médias natifs) · 2019+ : Living Standard

CSS

  • 1996 : CSS 1 · 1998 : CSS 2 (positionnement)
  • 2011+ : CSS 3 (modules : Flexbox, Grid, animations)

💡 Aujourd'hui : évolution modulaire et continue

HTTP vs HTTPS

Caractéristique HTTP HTTPS
Sécurité Données en clair Données chiffrées (TLS/SSL)
Port 80 443
Certificat Aucun SSL/TLS requis
Usage ⚠️ Déprécié ✅ Standard actuel

Structure d'un document HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon titre</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Contenu visible -->
</body>
</html>

Décryptage

  • <!DOCTYPE html> → standard HTML5
  • <html lang="fr"> → conteneur racine + langue
  • <head> → métadonnées, titre, liens CSS
  • <meta charset="UTF-8"> → encodage des caractères
  • <title> → titre de l'onglet
  • <link rel="stylesheet"> → feuille de style CSS
  • <body> → contenu visible

Balises de base

Balise Usage Exemple
<h1>–<h6> Titres hiérarchisés <h1>Bienvenue</h1>
<p> Paragraphe <p>Texte...</p>
<ul> / <ol> Listes <ul><li>Item</li></ul>
<a> Lien <a href="...">Site</a>
<img> Image <img src="..." alt="...">

⚠️ alt obligatoire · respecter la hiérarchie des titres

Introduction au CSS

/* style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #fafafa;
    margin: 20px;
}
h1 { color: #2c3e50; }
p  { line-height: 1.5; }

Structure d'une règle CSS

sélecteur {
    propriété: valeur;
}
  • Sélecteur : cible les éléments (body, h1, p)
  • Propriété : aspect à modifier (color, margin)
  • Valeur : ce qu'on applique (#2c3e50, 20px)

Mise en forme simple

Propriété Effet
color Couleur du texte
background-color Couleur de fond
margin Espaces externes
padding Espaces internes
text-align Alignement du texte

Margin : à l'extérieur de la bordure · Padding : à l'intérieur